<template>
  <div class="trip">
    <div class="trip-head">
      <div class="white"></div>
      <div class="trip-head-9px">
        <div class="line-btn">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
        </div>
        <h2>我的行程</h2>
        <div class="my-line">
          <div class="visit-flex">
            <p class="my-visit-line">我的旅行路线</p>
            <p class="new-line">创建行程</p>
          </div>
          <img
            class="trip-img-1"
            src="http://10.31.165.14:3000/images/shanghai.jpg"
            alt=""
          />
          <div class="trip-master-picture">
            <p class="pic-1">上海→北京之旅</p>
            <p class="pic-2">共2天 五个游玩景点丨随时出发</p>
          </div>
          <div class="trip-history">查看历史行程</div>
        </div>
      </div>
    </div>
    <ul class="ul_next">
      <li class="next" v-for="item in mylist" :key="item">
        <span class="next_1">下一站</span>
        <span class="next_2">{{ item.back }}→{{ item.go }}</span>
        <div class="time">出行时间: 2021.10.22</div>
      </li>
    </ul>
    <div class="visit-line">
      <div class="visit-line-detail" v-for="(item, index) in lists" :key="item">
        <div class="line-detail-img">
          <img :src="item.imgurl" alt="" />
        </div>
        <div class="line-detail-text">
          <p>{{ item.back }}→{{ item.go }}</p>
          <span>{{ item.title }}</span>
        </div>
        <div class="line-detail-btn">
          <button @click="handleAdd(index)">添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, reactive, watch } from "@vue/runtime-core";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();

    onMounted(() => {
      store.dispatch("gettrip");
    });
    const lists = computed(() => {
      return store.state.triplist;
    });
    watch(lists, (o, n) => {
      n;
      console.log(lists);
    });
    //添加行程
    const mylist = reactive([]);
    const handleAdd = (index) => {
      mylist.push(lists.value[index]);
      console.log(mylist);
      lists.value.splice(index, 1);
    };

    return { lists, mylist, handleAdd };
  },
};
</script>
<style lang="less" scoped>
.ul_next {
  .next {
    margin: 0 auto;
    width: 358px;
    height: 34px;
    position: relative;
    border: 0.5px solid #909090;
    border-radius: 5px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
    .next_1 {
      font-size: 11px;
      font-weight: 500;
      color: #909090;
      line-height: 34px;
      margin-left: 10px;
      margin-right: 80px;
    }
    .next_2 {
      font-size: 14px;
      font-weight: 500;
      color: #111111;
      line-height: 34px;
    }
    .time {
      font-size: 8px;
      font-weight: 500;
      color: #909090;
      position: absolute;
      right: 10px;
      bottom: 5px;
    }
  }
}

.trip {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #fff;
}

.line-btn {
  padding: 9px 0px;

  .line-1 {
    width: 23px;
    height: 1px;
    background: #646464;
    margin-bottom: 6px;
  }

  .line-2 {
    width: 29px;
    height: 1px;
    background: #646464;
    margin-bottom: 6px;
  }

  .line-3 {
    width: 23px;
    height: 1px;
    background: #646464;
  }
}

.trip-head {
  width: 100%;
  // height: 213px;
  background: radial-gradient(circle, #faf8f5 0%, #c5eefc 100%);
  .trip-head-9px {
    padding: 0px 9px;
  }
  > h2 {
    padding-top: 9px;
    width: 67px;
    height: 15px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #161616;
    line-height: 12px;
    padding-bottom: 14px;
  }
  .my-line {
    position: relative;
    margin-top: 14px;
    width: 358px;
    height: 154px;
    background: #ffffff;
    border-radius: 7px;
    .visit-flex {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      .my-visit-line {
        width: 116px;
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #121212;
        line-height: 12px;
      }
      .new-line {
        width: 68px;
        height: 10px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #646464;
        line-height: 12px;
      }
    }
    .trip-img-1 {
      z-index: 0;
      position: absolute;
      width: 358px;
      height: 90px;
    }
    .trip-master-picture {
      position: relative;
      z-index: 1;
      width: 358px;
      height: 90px;
      padding-left: 17px;
      background: linear-gradient(
        90deg,
        #46aef7 0%,
        rgba(70, 174, 247, 0.05) 100%
      );

      .pic-1 {
        padding-top: 22px;
        width: 108px;
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #f9f9f9;
        line-height: 12px;
      }
      .pic-2 {
        padding-top: 26px;
        width: 173px;
        height: 10px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #f9f9f9;
        line-height: 12px;
      }
    }
    .trip-history {
      position: absolute;
      right: 0;
      margin: 11px 13px;
      width: 72px;
      height: 10px;
      font-size: 11px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #646464;
      line-height: 12px;
    }
  }
}
.white {
  width: 100%;
  height: 100px;
  top: 165px;
  position: absolute;
  z-index: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    #fff 50%
  );
}
.visit-line {
  position: relative;
  padding: 0px 9px 1.5rem 9px;
}
.visit-line-detail {
  border-bottom: 1px solid #e9e9ea;
  border-right: 1px solid #e9e9ea;
  margin-top: 18px;
  border-radius: 5px;
  height: 87px;
  width: 358px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .line-detail-img {
    height: 70px;
    width: 120px;
    border-radius: 7px;
    overflow: hidden;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .line-detail-text {
    > p {
      width: 100px;
      height: 14px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #111111;
      line-height: 12px;
    }
    > span {
      width: 44px;
      height: 10px;
      font-size: 11px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #646464;
      line-height: 12px;
    }
  }
  .line-detail-btn {
    width: 48px;
    height: 27px;
    > button {
      width: 100%;
      height: 100%;
      background: #46aef7;
      border: none;
      border-radius: 5px;
      color: #fff;
    }
  }
}
</style>
